<template>
  <div class="category">
    <cg-top-bar></cg-top-bar>
    <side-bar
      class="side-bar"
      :categoryList="categoryList"
      @sideItemClick="sideItemClick"
    ></side-bar>
    <scroll :probe-type="3" class="content-scroll" ref="scroll">
      <sub-category
        :categoryContentList="categoryContentList"
        class="sub-category"
      ></sub-category>

      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
      ></tab-control>

      <goods-list :goods="categoryDetailList"></goods-list>
    </scroll>
  </div>
</template>

<script>
// 导入相应的组件
import CgTopBar from "./childComps/CgTopBar";
import SideBar from "./childComps/SideBar";
import SubCategory from "./childComps/SubCategory";
import Scroll from "components/common/scroll/Scroll.vue";
import TabControl from "components/content/tabControl/TabControl.vue";
import GoodsList from "components/content/goods/GoodsList";

import { imgListenerMixin } from "common/mixin";
// 导入网络请求数据的方法
import {
  getCategoryData,
  getCategoryContentList,
  getCategoryDetailList,
} from "network/category";

export default {
  components: {
    CgTopBar,
    SideBar,
    SubCategory,
    Scroll,
    TabControl,
    GoodsList,
  },
  mixins: [imgListenerMixin],

  data() {
    return {
      // 分类内容
      categoryContentList: [],
      categoryList: [],
      // 分类侧边栏数据
      categoryDetailList: [],
      sideItemIndex: 0,
      currentIndex: 0,
    };
  },
  mounted() {
    this.getCategory();
  },
  methods: {
    // 网络请求获得数据
    getCategory() {
      getCategoryData().then((res) => {
        this.categoryList = res.data.category.list;
        // console.log(res);
        console.log(this.categoryList);
        this.$nextTick(() => {
          this.getCategoryContentList(this.categoryList[0].maitKey);
          this.getCategoryDetailList(this.categoryList[0].miniWallkey, "pop");
        });
      });
    },
    // 获得内容数据
    getCategoryContentList(key) {
      getCategoryContentList(key).then((res) => {
        this.categoryContentList = [...res.data.list];
      });
    },
    // 获得分类数据
    getCategoryDetailList(key, type) {
      getCategoryDetailList(key, type).then((res) => {
        this.categoryDetailList = [...res];
      });
    },

    sideItemClick(index) {
      if (this.sideItemIndex === index) return;
      this.sideItemIndex = index;
      // this.getCategoryContentList(
      //   this.categoryList[this.sideItemIndex].maitKey
      // );
      this.currentIndex = 0;
      this.getCategoryDetailList(
        this.categoryList[this.sideItemIndex].miniWallkey,
        "pop"
      );

      this.getCategoryContentList(
        this.categoryList[this.sideItemIndex].maitKey
      );
    },
    tabClick(index) {
      if (this.currentIndex === index) return;
      this.currentIndex = index;
      const titles = ["pop", "new", "sell"];
      this.getCategoryDetailList(
        this.categoryList[this.sideItemIndex].miniWallkey,
        titles[this.currentIndex]
      );
    },
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
  position: relative;
}
.category-content {
  display: flex;
}
.content-scroll {
  position: absolute;
  top: 44px;
  right: 0;
  left: 100px;
  bottom: 50px;
  flex: 1;
}
</style>